<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"  @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="专题名称">
          <a-input placeholder="请输入专题名称" v-decorator="['catalogName']"  :disabled="true" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接口类型">
          <j-dict-select-tag :trigger-change="true" v-decorator="['servType', validatorRules.servType]" placeholder="请选择接口类型" dict-code="catalog_serv_type" :disabled="disableSubmit" @change="changeServType" />
        </a-form-item>
        <!-- catalog_serv_type	 -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接口名称" v-if="servType != 'custom'">
          <a-select :filter-option="filterOption" show-search v-decorator="['servId', validatorRules.servId]" placeholder="请选择接口" @change="changeServ">
            <a-select-option  :value="item.id" :key="'servId_' + item.id" v-for="item in apiList">{{ item.serviceName }}</a-select-option>
          </a-select>
        </a-form-item>

         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接口名称" v-if="servType == 'custom'">
          <a-input placeholder="请输入接口名称" v-decorator="['servName' , validatorRules.servId]"  :disabled="disableSubmit" />
        </a-form-item>

         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接口地址" v-if="servType == 'custom'">
          <a-input placeholder="请输入接口地址" v-decorator="['servUrl', validatorRules.servUrl]"  :disabled="disableSubmit" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="参数备注" v-if="servType == 'custom'">
          <a-input placeholder="请输入参数备注" v-decorator="['paramRemark']"  :disabled="disableSubmit" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" v-if="servType == 'custom'">
          <a-input placeholder="请输入备注" v-decorator="['remark']"  :disabled="disableSubmit" />
        </a-form-item>
        <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="专题地址">
          <a-input placeholder="请输入专题名称" v-model="servUrl"  :disabled="true" />
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'SysDataSourceModal',
  components: {},
  data() {
    return {
      disableSubmit: false,
      servType: null,
      catalogId: null,
      servUrl: null,
      apiList: [],
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        servId: { rules: [{ required: true, message: '请选择接口!' }] },
        servType: { rules: [{ required: true, message: '请选择接口类型!' }] },
        servName: { rules: [{ required: true, message: '请输入接口名称!' }] },
        servUrl: { rules: [{ required: true, message: '请输入接口地址!' }] }
      }
    }
  },
  created() {
  },
  methods: {
    changeServType(val) {
      this.servType = val
      this.getApiList()
    },
    changeServ() {

    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // /index/scSituationIndexTopicServ/list
    getApiList() {
      this.apiList = []
      var createType = '1'
      if (this.servType == 'sql') {
        createType = '3'
      } else if (this.servType == 'table') {
        createType = '1,2'
      } else {
        return
      }

      getAction('/index/scSituationIndexTopicServ/list', { pageNo: 1, pageSize: 1000000, createType: createType }).then(res => {
        if (res.success) {
          this.apiList = res.result.records
        }
      })
    },
    edit(record) {
      this.catalogId = record.catalogId
      // this.getApiList()
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.databaseType = this.model.dbType
        this.form.setFieldsValue(pick(this.model, 'catalogName', 'servId'))
      })
    },
    close() {
      this.form.resetFields()
      this.servUrl = null
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          var params = {}
          if (this.servType != 'custom') {
            var servObj = this.apiList.find(item => item.id == values.servId)
            params = {
              servId: servObj.id
            }
          } else {
            params = values
          }
          params.catalogId = this.catalogId

          const method = 'post'
          httpAction('/index/scSituationServCatalogRel/add', params, method).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.atn-testbtn {
    color: #2F77F2 !important;
    background: #FFFFFF !important;
    box-shadow: 0px 1px 3px 0px rgba(4, 0, 0, 0.08) !important;
    border: 1px solid #2F77F2 !important;
    border-radius: 2px !important;
    padding: 0 10px !important;
    height: 34px !important;
    margin: 0 8px 8px 0;
}
</style>
